<template>
  <div>
    <el-card>
      <div>
        姓名:<el-input v-model="inp" placeholder="请输入内容" @input="search" />
      </div>
      <el-table
        :data="tableData"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
        />
        <el-table-column
          label="姓名"
          prop="name"
        />
        <el-table-column
          label="公司名称"
          prop="company"
        />
        <el-table-column
          label="公司地址"
          prop="city"
        />
        <el-table-column
          label="面试方式"
          prop="way"
        />
        <el-table-column
          label="面试时间"
        >
          <template slot-scope="scope">
            {{ scope.row.time|moment("YYYY-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200px">
          <template slot-scope="scope">
            <el-button @click="tong(scope.row.id)"><a class="green">通过</a></el-button>
            <el-button @click="refuse(scope.row.id)"><a class="red">驳回</a></el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        :page-sizes="[5, 10, 15, 20]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="t"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-card>

    <el-dialog title="原因" :visible.sync="dialogFormVisible" width="30%">
      <el-form ref="ruleForm" :model="form" :rules="rules">
        <el-form-item label="驳回原因"    prop="reason">
          <el-input v-model="form.reason" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
      inp: '',
      tableData: [],
      size: 5,
      page: 1,
      t: 0,
      pageisornot: false,
      dialogFormVisible: false,
      form: {
        id: '',
        reason: ''
      },
      rules: {
        reason: [
          { required: true, message: '请输入驳回理由', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getmian()
  },
  mounted() {},
  methods: {

    async getmian() {
      this.pageisornot = false
      var res = await this.http.get('/replay/replay', {
        params: {
          status: 0,
          page: this.page,
          size: this.size
        }
      })
      console.log(res)
      if (res.status == 200) {
        this.tableData = res.data.data
        this.t = res.data.count
      }
    },
    async search() {
      if (!this.pageisornot) {
        this.page = 1
      }
      if (this.inp != '') {
        var res = await this.http.get('/replay/replay', {
          params: {
            name: this.inp
          }
        })
        if (res.status == 200) {
          this.tableData = res.data
        }
      } else {
        this.getmian()
      }
      this.pageisornot = true
    },
    handleSizeChange(v) {
      this.size = v
      if (this.pageisornot) {
        this.search()
      } else {
        this.getmian()
      }
    },
    handleCurrentChange(v) {
      this.page = v
      if (this.pageisornot) {
        this.search()
      } else {
        this.getmian()
      }
    },
    async tong(id) {
      console.log(id)
      var res = await this.http.patch(`/replay/replay/${id}`, {
        status: 1
      })
      if (res.status == 200) {
        this.$message.success('已通过')
        this.getmian()
      }
    },
    refuse(id) {
      this.form.id = id
      this.dialogFormVisible = true
    },
    async save() {
      this.$refs.ruleForm.validate(async(valid) => {
        if (valid) {
          var res = await this.http.patch(`/replay/replay/${this.form.id}`, {
            reason: this.form.reason,
            status: 2
          })
          if (res.status == 200) {
            this.getmian()
            this.dialogFormVisible = false
            this.$message.success('驳回成功')
          }
        }
      })
    }
  }
}
</script>
<style scoped>
    .el-input{
        width: 200px;
        margin-left: 7px;
    }
    .el-pagination{
      margin-top: 20px;
      text-align: center;
    }
    .el-table .el-button{
      background: 0;
      padding-left: 0;
      padding-right: 0;
      display: inline-block;
      border:0;
    }
    .green{
      color: green;
    }
    .red{
      color: red;
    }
</style>
